<template>
    <div class="movieItem">
        <div class="movieItem-1">
            <img :src="coverpath" alt="">
             <div class="ticketStyle">
                <button @click="buyTicket()">购票</button>
            </div>
        </div>
        <div class="movieItem-2">
            <span>{{title}}</span>
            <span>{{score}}</span>
        </div>
       
    </div>
</template>

<script>
/*
    1、在vue组件中有两个选项都是用来处理数据
    data:定义本组件内的私有数据
    props:定义的数据来自外部组件的
    2、使用props传递父组件数据到子组件的实现步骤
    第1步：在子组件的定义props选项
    第2步：在子组件的template中可以使用v-bind或者插值表达式来显示父组件传递来的数据
    第3步：父组件在调用子组件的时候，通过属性方式将值进行传递
 */
export default {
    props:['coverpath','title','score'],
    methods:{
        buyTicket(){
           this.$emit('make',"您已经订购了"+this.title+"票")
        }
    }
}
</script>

<style lang="scss">
    .movieItem{
        display: flex;
        flex-direction: column;
        width: 157px;
        height: 254px;
        border: 1px solid #ccc;
        margin: 12px;
        .movieItem-1{
            position: relative;
            display: flex;
            width: 100%;
            height: 220px;
            background-color: yellow;
            overflow: hidden;
            img{
                width: 100%;
            }
            .ticketStyle{
                position:absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
             }
        }
        .movieItem-2{
            display: flex;
            flex: 1;
        }
       
    }
</style>